<template>

	<body>
		<div class="loan_nav col_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>贷款产品</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<div>
			<swiper :list="imgList" :show-dots="false" loop auto :aspect-ratio="0.3" dots-position="center" dots-class="custom-bottom"></swiper>
		</div>
		<div class="products_title">
			<ul>
				<li>
					<p>{{proInfo.loansName}}</p>
				</li>
				<li>
					<!-- <p class="col-gray">2017/6/28&nbsp;&nbsp;开放中</p> -->
				</li>
			</ul>
		</div>
		<div class="products_text" v-html="proInfo.info">
			<!-- {{proInfo.info}} -->
		</div>
		<div style="height:1rem;">

		</div>
		<div class="products_foot">
			<ul>
				<li @click="collect" class="col_Collection">
					<p>收藏</p>
				</li>
				<li @click="showHideOnBlur=true" class="col-green">
					<a>
						<p class="col-w">咨询客服</p>
					</a>
				</li>
				<li class="apply_btn">
					<router-link :to="`/loanapplication/${$route.params.id}`">
						<p class="col-w">立即申请</p>
					</router-link>
				</li>
			</ul>
		</div>
		<x-dialog v-model="showHideOnBlur" class="dialog-demo" hide-on-blur>
			<div class="img-box">
				<!-- <img :src="qrCodeUrl" style="width:90%;margin:auto;margin-top:10px;"> -->
				<img src="@/assets/img/er.png" style="width:90%;margin:auto;margin-top:10px;">
				<p>长按识别图中二维码</p>
			</div>
			<div @click="showHideOnBlur=false">
				<span class="vux-close"></span>
			</div>
		</x-dialog>
	</body>
</template>

<script>
import { XDialog } from 'vux'
export default {
	components: {
		XDialog
	},
	data() {
		return {
			proInfo: {},
			qrCodeUrl: null,
			showHideOnBlur: false,

			imgList: []
		}
	},
	created() {
		this.query()
		this.queryImg()
	},
	methods: {
		query() {
			const id = this.$route.params.id
			this.$http.get(`/app/product/info/${id}`).then(json => {
				const { code, product } = json
				this.proInfo = product
			})

			this.$http.get('/app/index/serviceQrCode').then(json => {
				const { code, url } = json
				this.qrCodeUrl = url
			})
		},
		collect() {
			const { loansName, loansInfoId, mainImg } = this.proInfo
			const params = {
				title: loansName,
				url: `/apply/${loansInfoId}`,
				imgs: mainImg
			}
			this.$http.post('/app/collect/save', params).then(json => {
				const { code } = json
				if (code === 0) {
					this.$vux.toast.show({ text: '收藏成功' })
				}
			})
		},
		queryImg() {
			this.$http.get('/app/index/carousel', {
				params: { page: 'apply' }
			}).then(json => {
				const { code, carousel } = json
				if (code === 0) {
					carousel.forEach(n => {
						this.imgList.push({
							url: n.url,
							img: n.imgPath
						})
					})
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';

.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .img-box p{
	  margin-top: 10px;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>